<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
         p{
            position: absolute;
            left:420px; top: 50px;
            padding: 10px 30px;
            color: white;
            font-size: 20px;
            font-family: "Microsoft Yahei";
            
        }
        #canvas{
            cursor: pointer;
            background:#eee;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src='../js/ball.js'></script>
    <script src="../js/line.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            canvas.width = document.body.clientWidth;
            canvas.height = document.body.scrollHeight;

            var particles = [],
               numParticles = 11;
               
            //创建粒子
           for(var particle, i=0; i<numParticles; i++){
               particle = new Ball(5,"orange");
               particle.x = Math.random()*canvas.width;
               particle.y = Math.random()*canvas.height;
               particle.mass = 1;
               particles.push(particle);
           }
           
           //绘制粒子
           function draw(particle){
               particle.draw(context);
           }
          
          //引力函数
           function gravitate(partA, partB){
               var dx = partB.x - partA.x;
               var dy = partB.y - partA.y;
               var distQ = dx*dx + dy*dy;           //计算物体建的距离
               var dist = Math.sqrt(distQ);           //距离的平方
               var F = (partA.mass * partB.mass)/distQ;  //万有引力公式
               
               var ax = F * dx/dist;        //作用力作用于加速度
               var ay = F * dy/dist;        
               
               partA.vx += ax/partA.mass;    //加速度作用于速度
               partA.vy += ay/partA.mass;
               partB.vx -= ax/partB.mass;
               partB.vy -= ay/partB.mass;
           }
            
            function rotate (x, y, sin, cos, reverse) {
                return {
                    x: (reverse) ? (x * cos + y * sin) : (x * cos - y * sin),
                    y: (reverse) ? (y * cos - x * sin) : (y * cos + x * sin)
                };
            }

            function checkCollision (ball0, ball1) {
                    var dx = ball1.x - ball0.x,
                        dy = ball1.y - ball0.y,
                        dist = Math.sqrt(dx * dx + dy * dy);
                    //collision handling code here
                    if (dist < ball0.radius + ball1.radius) {
                      //calculate angle, sine, and cosine
                      var angle = Math.atan2(dy, dx),
                          sin = Math.sin(angle),
                          cos = Math.cos(angle),
                          //rotate ball0's position
                          pos0 = {x: 0, y: 0}, //point
                          //rotate ball1's position
                          pos1 = rotate(dx, dy, sin, cos, true),
                          //rotate ball0's velocity
                          vel0 = rotate(ball0.vx, ball0.vy, sin, cos, true),
                          //rotate ball1's velocity
                          vel1 = rotate(ball1.vx, ball1.vy, sin, cos, true),
                          //collision reaction
                          vxTotal = vel0.x - vel1.x;
                      vel0.x = ((ball0.mass - ball1.mass) * vel0.x + 2 * ball1.mass * vel1.x) /
                               (ball0.mass + ball1.mass);
                      vel1.x = vxTotal + vel0.x;
                      //update position - to avoid objects becoming stuck together
                      var absV = Math.abs(vel0.x) + Math.abs(vel1.x),
                          overlap = (ball0.radius + ball1.radius) - Math.abs(pos0.x - pos1.x);
                      pos0.x += vel0.x / absV * overlap;
                      pos1.x += vel1.x / absV * overlap;
                      //rotate positions back
                      var pos0F = rotate(pos0.x, pos0.y, sin, cos, false),
                          pos1F = rotate(pos1.x, pos1.y, sin, cos, false);
                      //adjust positions to actual screen positions
                      ball1.x = ball0.x + pos1F.x;
                      ball1.y = ball0.y + pos1F.y;
                      ball0.x = ball0.x + pos0F.x;
                      ball0.y = ball0.y + pos0F.y;
                      //rotate velocities back
                      var vel0F = rotate(vel0.x, vel0.y, sin, cos, false),
                          vel1F = rotate(vel1.x, vel1.y, sin, cos, false);
                      ball0.vx = vel0F.x;
                      ball0.vy = vel0F.y;
                      ball1.vx = vel1F.x;
                      ball1.vy = vel1F.y;
                    }
          }
           
           //移动函数
           function move(partA, i){
               partA.x += partA.vx;
               partA.y += partA.vy;
               
               for(var partB, j=i+1; j<numParticles; j++){
                   partB = particles[j];
                   //引力
                   gravitate(partA, partB);

                    checkCollision(partA, partB); //碰撞检测
               }
           }
           //动画循环
           (function drawFrme(){
               window.requestAnimationFrame(drawFrme, canvas);

                    // 拖尾效果 半透明遮罩
//                 context.fillStyle = "rgba(255,230,230, 0.02)"
//                 context.fillRect(0, 0, canvas.width, canvas.height)
                context.clearRect(0 ,0, canvas.width, canvas.height);
               
               particles.forEach(move);        //移动
               particles.forEach(draw);        //绘制
           }())
        }
        
        // 终点
        function gravitate(partA, partB){
             var dx = partB.x - partA.x;
             var dy = partB.y - partA.y;
             var distQ = dx*dx + dy*dy;
             var dist = Math.sqrt(distQ);
             var F = (partA.mass * partB.mass)/distQ;

             var ax = F * dx/dist;
             var ay = F * dy/dist;

             partA.vx += ax/partA.mass;
             partA.vy += ay/partA.mass;
             partB.vx -= ax/partB.mass;
             partB.vy -= ay/partB.mass;
         }

    </script>
</body>
</html>
